<template>
	<view>
		<scroll-view scroll-y="true">
			<view>
				<van-cell-group class="inp">
					<van-field placeholder="请输入搜索关键字" left-icon="/static/img/sousuo.png" />
				</van-cell-group>
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item v-for="item in imgData">
						<image :src="item.imgUrl" mode=""></image>
					</swiper-item>

				</swiper>
				<view class="Img">
					<view class="IMG">
						<image src="../../../static/img/tuijian.png" mode=""></image>
						<view class="wenzi">
							新品推荐
						</view>
					</view>
					<view class="IMG">
						<image src="/static/img/xianshi.png" mode=""></image>
						<view class="wenzi">
							限时特惠
						</view>
					</view>
					<view class="IMG">
						<image src="/static/img/qiang.png" mode=""></image>
						<view class="wenzi">
							每日疯抢
						</view>
					</view>
					<view class="IMG">
						<image src="../../../static/img/juan.png" mode=""></image>
						<view class="wenzi">
							领优惠卷
						</view>
					</view>

				</view>
				<van-notice-bar left-icon="volume-o" :scrollable="false">
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="interval" :duration="duration">
						<swiper-item v-for="item in noticeData">
							<view class="swiper-item">{{item.title}}</view>
						</swiper-item>

					</swiper>

				</van-notice-bar>


				<view class="new" v-for="t in shopData">
					<view class="newtop">
						<view class="biaoti">
							{{t.title}}
						</view>
						<view class="more">
							查看更多>
						</view>
					</view>

					<view class="newzhongjian">
						<view @click="tiaozhuan(item)" class="newlist" v-for="item in t.productDtoList">
							<image :src="item.pic" mode=""></image>
							<view class="jieshao">
								{{item.prodName}}
							</view>
							<view class="jia">
								￥{{item.price}}
							</view>
						</view>
					</view>

				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import {
		lunbotu,
		tongzhi,
		shop
	} from '../../../api/zhuye';
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				imgData: [],
				noticeData: [],
				shopData: []
			};
		},
		onShow() {
			this.getLuoBoTu()
			this.getTongzhi()
			this.getShop()
		},
		methods: {
			async getLuoBoTu() {
				let result = await lunbotu()
				this.imgData = result.data.data
			},
			async getTongzhi() {
				let result = await tongzhi()
				this.noticeData = result.data.data
			},
			async getShop() {
				let result = await shop()
				this.shopData = result.data.data
			},
			tiaozhuan(id) {
				uni.navigateTo({
					url: `/pages/xiangqing/xiangqing/xiangqing?id=${id.prodId}`
				})
			}
		},

	}
</script>

<style lang="scss">
	.Img {
		display: flex;
		margin-top: 50rpx;
		margin-bottom: 50rpx;

		.IMG {
			width: 25%;
			text-align: center;

			image {
				height: 50rpx;
				width: 50rpx;
			}

			.wenzi {
				margin-top: 30rpx;
				font-size: 30rpx;
			}
		}


	}

	.inp {
		background-color: #333333;
		border: 1px solid #333333;
	}

	.tishi {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f5e1a0;
		margin-top: 50rpx;
		border-radius: 10px;
		height: 80rpx;

		image {
			width: 30rpx;
			height: 30rpx;
		}

		text {
			color: #eb7d1f;
			font-size: 30rpx;
		}
	}

	.new {
		display: flex;
		flex-direction: column;
		margin-top: 50rpx;

		.newtop {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 40rpx;

			.more {
				font-size: 30rpx;
				color: #d3d2cf;
			}
		}

		.newzhongjian {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;

			.newlist {
				width: 30%;

				image {
					width: 200rpx;
					height: 200rpx;
				}

				.jieshao {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					font-size: 30rpx;
					font-weight: 700;

				}
			}
		}

	}

	.swiper {
		width: 750rpx;

		image {
			width: 100%;
			height: 300rpx;
		}
	}

	.jia {
		color: red;
	}
</style>